<template>
  <el-container>
    <el-aside width="40%" style="margin-left: 30px">
      <div style="font-size: 20px; color: #409EFF; margin-top: 10px">培训大纲</div>
      <div v-for="catalog in outlineList" :key="catalog.index">
        <div style="font-size: 16px; color: #409EFF; margin-top: 25px; margin-left: 10px">
          {{catalog.catalogName}}
        </div>
        <div v-for="classFile in catalog.classFileList" :key="classFile.index">
          <div style="display: flex; flex-flow: row nowrap; justify-content: space-between">
            <div style="font-size: 16px; color: #909399; margin-top: 10px; margin-left: 20px">
              {{classFile.classTitle}}
            </div>
            <div style="font-size: 16px; color: #909399; margin-top: 10px; margin-left: 20px">
              {{classFile.classFile.split('/')[3]}}
            </div>
            <el-upload
              v-if="classFile.classFile == ''"
              class="upload-demo"
              action="str"
              :data="classFile.outlineId"
              :show-file-list="true"
              :before-upload="beforeUploadFile"
              :http-request="uploadFile"
              style="margin-top: 5px; float: right">
              <el-button size="mini" type="primary">上传课件</el-button>
            </el-upload>
            <el-button v-if="classFile.classFile != ''" size="mini" type="danger" style="margin-top: 5px" 
            @click="deleteFile(classFile.outlineId)">删除课件</el-button>
          </div>
        </div>
      </div>
    </el-aside>
    <el-main style="margin-left: 30px">
      <div style="font-size: 20px; color: #409EFF; margin-top: -10px">素质模型</div>
      <div v-for="abilityModel in abilityModelList" :key="abilityModel.index"
          style="font-size: 16px; color: #409EFF; margin-top: 25px; margin-left: 10px" class="am">
        {{abilityModel.abilityName}}
        <div v-for="model in abilityModel.childAbilityList" :key="model.index">
          <div style="font-size: 16px; color: #909399; margin-left: 20px; margin-top: 5px; display: flex">
            {{model.abilityName}}
            <el-progress :percentage="model.score" :color="customColors" :format="format"></el-progress>
            <el-button icon="el-icon-minus" @click="decrease(model.abilityId, model.score)" size="mini"></el-button>
            <el-button icon="el-icon-plus" @click="increase(model.abilityId, model.score)" size="mini"></el-button>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { getOutline } from '@/api/item'
import { getAbilityModel } from '@/api/item'
import { updateAbilityModel } from '@/api/item'
import { uploadFile } from '@/api/outline'
import { deleteFile } from '@/api/outline'
import { Message } from 'element-ui'

export default {
  data() {
    return {
      //目录数据
      outlineList: [],
      formInLine: {
        id: 0
      },

      //模型数据
      abilityModelList: [],
      model: {
        subjectId: this.$route.query.itemId,
        amId: 0,
        score: 0
      },
      customColors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ],
    }
  },
  created() {
    this.formInLine.id = this.$route.query.itemId;
    this.getData();
  },
  methods: {
    //获取数据
    getData(){
      getOutline(this.formInLine).then(res => {
        this.outlineList = res.data;
      }),
      getAbilityModel(this.formInLine).then(res => {
        this.abilityModelList = res.data;
      })
    },

    //模型进度条方法
    format(percentage) {
      return percentage+'分';
    },
    increase(abilityId, score) {
      this.model.amId = abilityId;
      let newScore = Number(score);
      this.model.score = newScore += 5;
      if (this.model.score > 100) {
        this.model.score = 100;
      }
      updateAbilityModel(this.model).then(res => {
        this.getData();
      });
    },
    decrease(abilityId, score) {
      this.model.amId = abilityId;
      let newScore = Number(score);
      this.model.score = newScore -= 5;
      if (this.model.score < 0) {
        this.model.score = 0;
      }
      updateAbilityModel(this.model).then(res => {
        this.getData();
      });
    },

    //上传视频
    uploadFile(param){
      const formData = new FormData();
      formData.append("id", param.data);
      formData.append("file", param.file);
      uploadFile(formData).then((res) => {
        Message({
          message: res.message || 'success',
          type: 'success',
          duration: 2 * 1000
        });
        this.getData();
      }).catch((err) => {
        
      });
    },

    //删除视频
    deleteFile(outlineId){
      deleteFile(outlineId).then((res) => {
        Message({
          message: res.message || 'success',
          type: 'success',
          duration: 2 * 1000
        });
        this.getData();
      }).catch((err) => {
        
      });
    },
    //上传按钮方法
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    }
  }
}
</script>

<style scoped>
.el-progress{
  width: 350px;
}
*{
  /* border: 1px solid red */
}
</style>